<template>
  <div class="index">
    <div class="policy-mian">
        <div class="policy-mian-top">
            <div class="title">选择领域进行政策匹配</div>
        </div>
        <div class="wrap">
           <div class="list">
               <div class="dt"><div class="dt-dian"></div>领域</div>
               <div class="dd" v-for="(item,index) in list" :key="index" @click="tog(item.id,index)" :class="zindex==index?'on':''"><div class="dd-dian"></div><div class="dd-dian1"></div>{{item.name}}</div>
           </div>
           <div class="btn" @click="btn">提交</div>
        </div>
    </div>
    <Pop @popTog="setTog" @alldata="alldataa" v-if="cloneIs"></Pop>
  </div>
</template>
<script>
import '@/assets/styles/policy-public.scss' // iboot css
import Pop from '@/views/components/policypop/pop'
import {getPolicyNaire} from '@/api/service/service'
export default {
  name: "index",
  data() {
    return {
        list:[],
        zindex:0,
        checkedfonta:"",
        checkedfontb:"",
        cloneIs:false,
        cateId:'',
        identity:''
    }
  },
  components:{Pop},
  created() {
    if(this.getQueryString("identity") == 'q'){
        this.list=[
            {id:18,name:"台资企业",on:false},
            {id:19,name:"文创企业",on:false},
            {id:20,name:"软件信息与服务企业",on:false},
            {id:21,name:"制造业",on:false},
            {id:22,name:"重点产业企业",on:false},
            {id:23,name:"三高企业",on:false},
        ]
        this.identity = "q"
    }else{
        this.list=[
            {id:10,name:"大学本科",on:false},
            {id:11,name:"硕士研究生",on:false},
            {id:12,name:"博士博士后",on:false},
            {id:13,name:"外籍人士",on:false},
            {id:17,name:"台湾同胞",on:false},
        ]
        this.identity = "g"
    }
    //this.apipost();
  },
  mounted(){},
  methods:{
      setTog(a){
        this.cloneIs = a;
      },
      alldataa(e){
          this.checkedfonta = e[0];
          this.checkedfontb = e[1];
        //   alert("您选择了"+this.checkedfonta+"和"+this.checkedfontb)
        let data = {
              cityId:e[0],
              districtId:e[1],
              cateId:this.list[this.zindex].id
          };
          this.loading = true;
          getPolicyNaire(data).then(res=>{
              this.cloneIs = false;
              this.loading = false;
            //   this.$router.push({path:'/policy/matching?questionItemIds=&cateId='+this.list[this.zindex].id+'&identity='+this.identity})
              if(res.resp_code === 0){
                  if(res.datas.questionList.length == 0){
                      this.$router.push({path:'/policy/matching?questionItemIds=&cateId='+this.list[this.zindex].id+'&identity='+this.identity})
                  }else{
                      this.$router.push({path:'/policy/qa?cityId='+e[0]+'&districtId='+e[1]+'&cateId='+this.list[this.zindex].id+"&identity="+this.identity})
                  }
                //   this.$router.push({path:'/policy/qa?cityId='+e[0]+'&districtId='+e[1]+'&cateId='+this.cateId})
              }else{
                  this.$router.push({path:'/policy/matching?questionItemIds=&cateId='+this.list[this.zindex].id+'&identity='+this.identity})
              }
          })
          
      },
      tog(id,i){
          this.zindex = i;
          this.cateId = id;
      },
      btn(){
          this.cloneIs = true
      },
      getQueryString (name) { 
      let reg = `(^|&)${name}=([^&]*)(&|$)`
      let r = window.location.search.substr(1).match(reg); 
      if (r != null) return unescape(r[2]); return null; 
    },
  }
}
</script>
<style scoped>
.list{
    box-shadow: 1px 2px 6px 1px rgba(44, 112, 141, 0.18);
    background: #fff;
}
.list .dt{
    padding-top: 5px;
    padding-left: 48px;
    line-height: 50px;
    font-size: 16px;
    position: relative;
    border-bottom: 1px solid #C8C8C8;
}
.list .dt .dt-dian{
    position: absolute;
    width: 25px;
    height:25px;
    background: url(../../assets/policy/policy-icon1.png);
    background-size: cover;
    border-radius: 50%;
    top: 17px;
    left: 14px;
}
.list .dd{
    padding-left: 48px;
    line-height: 50px;
    font-size: 16px;
    position: relative;
    border-bottom: 1px solid #BCBCBC;
    cursor:pointer
}
.list .dd .dd-dian{
    position: absolute;
    left: 18px;
    top: 14px;
    height: 20px;
    width: 20px;
    box-sizing: border-box;
    border: 2px solid #787878;
    border-radius: 50%;
}
.list .dd.on .dd-dian1{
    position: absolute;
    left: 23px;
    top: 19px;
    height: 10px;
    width: 10px;
    box-sizing: border-box;
    background: #3688A4;
    border-radius: 50%;
}
.list .dd.on .dd-dian{
    border: 2px solid #3688A4;
}
.btn{
    width: 322px;
    height: 42px;
    background: #3EACC4;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    line-height: 42px;
    margin: 60px auto;
}
</style>